<template>
  <div class="circle-detail-container">
    <!-- 固定的顶部header -->
    <div class="header">
      <!-- 返回按钮保持在左边 -->
      <button class="back-btn" @click="goBack">
        ← 返回列表
      </button>
      
      <!-- 居中的操作区域 -->
        <div class="header-actions">
          <!-- 状态徽章 - 改为button -->
          <button 
            class="status-badge" 
            :class="{ active: circle?.isActive, loading: statusLoading }"
            @click="toggleStatus"
            :disabled="!circle || statusLoading"
          >
            <span v-if="statusLoading" class="loading-spinner-small"></span>
            <span v-else>{{ circle?.isActive ? '启用' : '未启用' }}</span>
          </button>
          
          <!-- 操作按钮 -->
          <button class="primary-btn" @click="openOnMap">
            在地图上查看
          </button>
          <button class="secondary-btn" @click="loadCircleDetail">
            刷新
          </button>
          <button class="secondary-btn" @click="openUpdateEditor">
            更新
          </button>
          <button 
            class="secondary-btn" 
            @click="openMatchModal"
            :disabled="!circle || matchLoading"
          >
            <span v-if="matchLoading" class="loading-spinner-small"></span>
            <span v-else>钓点匹配</span>
          </button>
          <button 
            class="delete-btn" 
            @click="openDeleteModal"
            :disabled="!circle || deleteLoading"
          >
            <span v-if="deleteLoading" class="loading-spinner-small"></span>
            <span v-else>删除</span>
          </button>
        </div>
    </div>

    <!-- 可滚动的内容区域 -->
    <div class="scrollable-content" @scroll="handleScroll">
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
        <div class="loading-spinner"></div>
        <p>正在加载钓点圈详情...</p>
      </div>

      <!-- 错误状态 -->
      <div v-else-if="error" class="error-container">
        <div class="error-icon">⚠️</div>
        <p>{{ error }}</p>
        <button class="retry-btn" @click="loadCircleDetail">
          重新加载
        </button>
      </div>

      <!-- 详情内容 -->
      <div v-else-if="circle" class="detail-content">
        <!-- 图片轮播 -->
        <div class="image-section">
          <div class="image-container">
            <img 
              v-if="currentImage" 
              :src="currentImage" 
              :alt="circle.title"
              @error="handleImageError"
              class="main-image"
            />
            <div v-else class="no-image">
              <div class="no-image-icon">📸</div>
              <p>暂无图片</p>
            </div>
          </div>
          
          <!-- 图片导航 -->
          <div v-if="circle.pics && circle.pics.length > 1" class="image-nav">
            <button 
              v-for="(pic, index) in circle.pics" 
              :key="index"
              @click="currentImageIndex = index"
              :class="['thumb-btn', { active: index === currentImageIndex }]"
            >
              <img :src="pic" @error="handleImageError" />
            </button>
          </div>
        </div>

        <!-- 基本信息 -->
        <div class="info-section">
          <div class="info-header">
            <h1 class="circle-title">{{ circle.title }}</h1>
          </div>
          
          <div class="meta-info">
            <div class="info-item">
              <span class="label">地区：</span>
              <span class="value">{{ circle.city || '未知地区' }}</span>
            </div>
            
            <div class="info-item">
              <span class="label">区域：</span>
              <span class="value">{{ circle.area || '未指定' }}</span>
            </div>
            
            <div class="info-item">
              <span class="label">坐标：</span>
              <span class="value">{{ circle.latitude?.toFixed(6) }}, {{ circle.longitude?.toFixed(6) }}</span>
            </div>
          </div>

          <div class="description-section">
            <h3>描述</h3>
            <p class="description">{{ circle.description || '暂无描述' }}</p>
          </div>

          <!-- 钓点位置 -->
          <div v-if="circle.points && circle.points.length > 0" class="points-section">
            <h3>钓点位置 ({{ circle.points.length }}个)</h3>
            <div class="points-list">
              <div 
                v-for="(point, index) in circle.points" 
                :key="index"
                class="point-item"
              >
                <div class="point-index">{{ index + 1 }}</div>
                <div class="point-coords">
                  {{ point.latitude?.toFixed(6) }}, {{ point.longitude?.toFixed(6) }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 关联钓点表格 -->
        <div v-if="spotsData && spotsData.length > 0" class="spots-section">
          <h3>关联钓点 ({{ spotsTotal }}个)</h3>
          <div class="spots-table">
            <table>
              <thead>
                <tr>
                  <th>钓点名称</th>
                  <th>城市</th>
                  <th>类型</th>
                  <th>费用</th>
                  <th>位置</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="spot in spotsData" :key="spot.id">
                  <td>{{ spot.name }}</td>
                  <td>{{ spot.city }}</td>
                  <td>
                    <span :class="['type-badge', spot.is_private ? 'private' : 'public']">
                      {{ spot.is_private ? '私有' : '公共' }}
                    </span>
                  </td>
                  <td>
                    <span :class="['fee-badge', spot.is_free ? 'free' : 'paid']">
                      {{ spot.is_free ? '免费' : '收费' }}
                    </span>
                  </td>
                  <td>{{ spot.latitude?.toFixed(6) }}, {{ spot.longitude?.toFixed(6) }}</td>
                  <td>
                    <button class="btn-small btn-primary" @click="openSpotOnMap(spot)">
                      查看地图
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          
          <!-- 加载更多 -->
          <div v-if="spotsLoading" class="loading-more">
            <div class="loading-spinner-small"></div>
            <span>加载中...</span>
          </div>
          
          <div v-if="!hasMoreSpots && spotsData.length > 0" class="no-more">
            <span>已加载全部钓点</span>
          </div>
        </div>

        <div v-else-if="spotsData && spotsData.length === 0 && !spotsLoading" class="spots-section">
          <h3>关联钓点</h3>
          <div class="no-spots">
            <p>暂无关联钓点</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 钓点匹配模态框 -->
  <div v-if="showMatchModal" class="modal-overlay" @click="cancelMatch">
    <div class="modal-content match-modal" @click.stop>
      <div class="modal-header">
        <h3>钓点匹配</h3>
        <button class="close-btn" @click="cancelMatch">×</button>
      </div>
      
      <div class="modal-body">
        <!-- 加载状态 -->
        <div v-if="matchLoadingSpots" class="loading-container">
          <div class="loading-spinner"></div>
          <p>正在加载匹配的钓点...</p>
        </div>
        
        <!-- 错误状态 -->
        <div v-else-if="!matchingSpots || matchingSpots.length === 0" class="no-data">
          <div class="no-data-icon">🎣</div>
          <p>没有找到匹配的钓点</p>
        </div>
        
        <!-- 钓点列表 -->
        <div v-else class="spots-selection">
          <p class="selection-info">已选择 {{ selectedSpotIds.length }} 个钓点</p>
          
          <div class="spots-table-container">
            <table>
              <thead>
                <tr>
                  <th width="40%">钓点名称</th>
                  <th width="25%">城市</th>
                  <th width="25%">坐标</th>
                  <th width="10%">选择</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="spot in matchingSpots" :key="spot.id">
                  <td>{{ spot.name }}</td>
                  <td>{{ spot.city }}</td>
                  <td>{{ spot.latitude?.toFixed(6) }}, {{ spot.longitude?.toFixed(6) }}</td>
                  <td>
                    <label class="checkbox-container">
                      <input 
                        type="checkbox" 
                        :checked="selectedSpotIds.includes(spot.id)"
                        @change="toggleSpotSelection(spot.id)"
                      />
                      <span class="checkmark"></span>
                    </label>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      
      <div class="modal-footer">
        <button class="btn-cancel" @click="cancelMatch">取消</button>
        <button 
          class="btn-confirm" 
          @click="saveSelectedSpots"
          :disabled="selectedSpotIds.length === 0 || matchLoading"
        >
          <span v-if="matchLoading" class="loading-spinner-small"></span>
          <span v-else>添加 ({{ selectedSpotIds.length }})</span>
        </button>
      </div>
    </div>
  </div>

  <!-- 删除确认模态框 -->
  <div v-if="showDeleteModal" class="modal-overlay" @click="cancelDelete">
    <div class="modal-content" @click.stop>
      <div class="modal-header">
        <h3>确认删除</h3>
      </div>
      <div class="modal-body">
        <p>确定要删除钓点圈 <strong>"{{ circle?.title }}"</strong> 吗？</p>
        <p class="warning-text">此操作不可恢复，删除后所有数据将无法找回。</p>
      </div>
      <div class="modal-footer">
        <button class="btn-cancel" @click="cancelDelete">取消</button>
        <button 
          class="btn-confirm" 
          @click="confirmDelete"
          :disabled="deleteLoading"
        >
          <span v-if="deleteLoading" class="loading-spinner-small"></span>
          <span v-else>确认删除</span>
        </button>
      </div>
    </div>
  </div>


</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { invoke } from '@tauri-apps/api/core'

// 定义组件props
const props = defineProps<{
  id?: string
}>()

// 类型定义
interface Location {
  latitude: number
  longitude: number
}

interface Spot {
  id: string
  latitude: number
  longitude: number
  name: string
  city: string
  is_private: boolean
  is_free: boolean
}

interface FishingCircle {
  id: string
  title: string
  description: string
  area: string
  latitude: number
  longitude: number
  points: Location[]
  city: string
  cityCode: string
  isActive: boolean
  pics: string[]
  spots: Spot[]
}

// 路由
const route = useRoute()
const router = useRouter()

// 从props或路由参数获取circleId
const circleId = computed(() => props.id || (route.params.id as string))

// 状态管理
const circle = ref<FishingCircle | null>(null)
const loading = ref(false)
const error = ref('')
const currentImageIndex = ref(0)
const statusLoading = ref(false)
const deleteLoading = ref(false)
const showDeleteModal = ref(false)
const matchLoading = ref(false)
const showMatchModal = ref(false)
const matchingSpots = ref<Spot[]>([])
const selectedSpotIds = ref<string[]>([])
const matchLoadingSpots = ref(false)

// 分页状态
const spotsPage = ref(1)
const spotsPageSize = ref(10)
const spotsTotal = ref(0)
const spotsLoading = ref(false)
const spotsData = ref<Spot[]>([])
const hasMoreSpots = ref(true)

// 当前显示的图片
const currentImage = computed(() => {
  if (!circle.value?.pics || circle.value.pics.length === 0) return null
  return circle.value.pics[currentImageIndex.value]
})

// 获取钓点圈详情
const loadCircleDetail = async () => {
  try {
    loading.value = true
    error.value = ''
    
    console.log('开始加载圈子详情，ID:', circleId.value)
    
    // 调用后端API获取详情
    const response = await invoke('get_fishing_circle_detail', {
      id: circleId.value
    })
    
    console.log('圈子详情API响应:', response)
    
    // 解析响应结构，支持多种格式
    let apiData:any;
    if (response && typeof response === 'object') {
      if ('data' in response) {
        apiData = response.data
      } else {
        apiData = response
      }
      
      if (!apiData) {
        throw new Error('API返回空数据')
      }
      
      console.log('解析后的数据:', apiData)
      
      // 转换数据结构
      circle.value = {
        id: apiData.id?.toString() || '',
        title: apiData.title || '未命名圈子',
        description: apiData.description || '',
        area: apiData.area?.toString() || '',
        latitude: Number(apiData.latitude) || 0,
        longitude: Number(apiData.longitude) || 0,
        points: Array.isArray(apiData.points) ? apiData.points : [],
        city: apiData.city || '未知城市',
        cityCode: apiData.cityCode || '',
        isActive: Boolean(apiData.isActive),
        pics: Array.isArray(apiData.pics) ? apiData.pics : [],
        spots: []
      } as FishingCircle
      
      console.log('转换后的圈子数据:', circle.value)
      
      // 加载第一页钓点
      console.log('圈子详情加载完成，准备加载钓点...')
      await loadCircleSpots(1)
      loading.value = false
      
    } else {
      throw new Error('API响应格式不正确')
    }
    
  } catch (err) {
    console.error('获取钓点圈详情失败:', err)
    error.value = err instanceof Error ? err.message : '加载失败'
    loading.value = false
  }
}

// 处理图片加载失败
const handleImageError = (event: Event) => {
  const img = event.target as HTMLImageElement
  if (img.hasAttribute('data-error-handled')) return
  
  img.setAttribute('data-error-handled', 'true')
  img.src = '/placeholder-fishing.jpg'
}

// 返回列表
const goBack = () => {
  // 使用路由返回钓鱼圈列表，保留mode参数
  router.push({
    path: '/fishing-circle',
    query: { ...route.query }
  })
}

// 在地图上查看圈子
const openOnMap = () => {
  if (!circle.value) return
  
  console.log('在地图上打开圈子:', circle.value.title)
  const circleDetail = JSON.parse(JSON.stringify(circle.value))
  const event = new CustomEvent('toggle-map-mode', {
    detail: { 
      data: circleDetail,
      isMapMode: true,
      modeHandler: 'CircleDetail',
      autoDisplay: true
    }
  })
  window.dispatchEvent(event)
}

// 在地图上查看单个钓点
const openSpotOnMap = (spot: any) => {
  if (!spot) return
  
  console.log('在地图上打开钓点:', spot.name)
  const spotData = {
    id: spot.id,
    name: spot.name,
    latitude: spot.latitude,
    longitude: spot.longitude,
    type: spot.type,
    city: spot.city,
    isPrivate: spot.isPrivate,
    isFree: spot.isFree
  }
  
  const event = new CustomEvent('toggle-map-mode', {
    detail: { 
      data: spotData,
      isMapMode: true,
      modeHandler: 'SpotDetail',
      autoDisplay: true
    }
  })
  window.dispatchEvent(event)
}



// 切换状态
const toggleStatus = async () => {
  if (!circle.value) return
  
  statusLoading.value = true
  
  try {
    const newStatus = !circle.value.isActive
    
    // 调用后端API更新状态
    const response = await invoke('mark_circle_active', {
      id: circle.value.id.toString(),
      isActive: newStatus ? 1 : 0
    })
    
    console.log('状态更新响应:', response)
    
    // 更新本地状态
    circle.value.isActive = newStatus
    
    // 显示成功提示
    const message = newStatus ? '钓点圈已启用' : '钓点圈已停用'
      console.log(message)
      const event = new CustomEvent('show-notification', {
        detail: { 
          message: message, 
          type: 'success' 
        }
      });
      window.dispatchEvent(event);
    } catch (err) {
    console.error('状态更新失败:', err)
    const event = new CustomEvent('show-notification', {
          detail: { 
            message: '状态更新失败: ' + (err instanceof Error ? err.message : '未知错误'), 
            type: 'error' 
          }
        });
        window.dispatchEvent(event);
  } finally {
    statusLoading.value = false
  }
}

// 打开删除确认模态框
const openDeleteModal = () => {
  if (!circle.value) return
  showDeleteModal.value = true
}

// 确认删除
const confirmDelete = async () => {
  if (!circle.value) return

  try {
    deleteLoading.value = true
    showDeleteModal.value = false
    
    const response = await invoke('delete_fishing_circle', {
      id: circleId.value.toString()
    })
    
    console.log('删除成功:', response)
    
    // 删除成功后返回，使用与back-btn相同的逻辑
    goBack()
    
  } catch (err) {
    console.error('删除失败:', err)
    const event = new CustomEvent('show-notification', {
          detail: { 
            message: '删除失败: ' + (err instanceof Error ? err.message : '未知错误'), 
            type: 'error' 
          }
        });
        window.dispatchEvent(event);
  } finally {
    deleteLoading.value = false
  }
}

// 取消删除
const cancelDelete = () => {
  showDeleteModal.value = false
}

// 打开匹配模态框
const openMatchModal = async () => {
  if (!circle.value) return
  showMatchModal.value = true
  selectedSpotIds.value = []
  await loadMatchingSpots()
}

// 加载匹配的钓点
const loadMatchingSpots = async () => {
  if (!circle.value) return
  
  try {
    matchLoadingSpots.value = true
    
    // 调用后端API获取匹配的钓点
    const response = await invoke('get_circle_match', {
      id: circle.value.id.toString()
    })
    
    console.log('匹配的钓点响应:', response)
    
    // 解析API响应格式：{ code: 200, msg: 'success', status: 1, data: [...] }
    if (response && typeof response === 'object') {
      const apiResponse = response as any
      if (apiResponse.code === 200 && apiResponse.data) {
        matchingSpots.value = apiResponse.data as Spot[]
      } else {
        matchingSpots.value = []
      }
    } else {
      matchingSpots.value = []
    }
    
    console.log('解析后的钓点数据:', matchingSpots.value)
    
  } catch (err) {
    console.error('加载匹配钓点失败:', err)
    const event = new CustomEvent('show-notification', {
          detail: { 
            message: '加载匹配钓点失败: ' + (err instanceof Error ? err.message : '未知错误'), 
            type: 'error' 
          }
        });
        window.dispatchEvent(event);
    matchingSpots.value = []
  } finally {
    matchLoadingSpots.value = false
  }
}

// 切换钓点选择状态
const toggleSpotSelection = (spotId: string) => {
  const index = selectedSpotIds.value.indexOf(spotId)
  if (index > -1) {
    selectedSpotIds.value.splice(index, 1)
  } else {
    selectedSpotIds.value.push(spotId)
  }
}

// 加载钓点分页数据
const loadCircleSpots = async (page: number = 1) => {
  if (!circle.value) {
    console.warn('无法加载钓点：圈子数据未加载')
    return
  }
  
  console.log('开始加载钓点，圈子ID:', circle.value.id, '页码:', page)
  spotsLoading.value = true
  
  try {
    // 使用Tauri的fetch API调用后端接口
    const response = await invoke('get_circle_spots', {
      id: circle.value.id.toString(),
      page: page,
      size: spotsPageSize.value
    })
    
    console.log('分页钓点响应:', response)
    
    if (response && typeof response === 'object') {
      const apiResponse = response as any
      // 检查响应结构：可能是直接的分页数据或包装在data中
      const data = apiResponse.records ? apiResponse : apiResponse.data
      if (data && (data.records || data.list)) {
        // 使用实际的数据结构
        spotsTotal.value = data.total || 0
        
        // 转换钓点数据格式以匹配前端需求
        const formattedSpots = (data.records || []).map((spot: any) => ({
          id: spot.id,
          name: spot.name,
          description: '', // 默认空描述
          latitude: spot.latitude,
          longitude: spot.longitude,
          type: spot.is_private ? '私有' : '公开',
          location: `${spot.latitude}, ${spot.longitude}`,
          city: spot.city || '未知城市',
          is_private: spot.is_private,
          is_free: spot.is_free,
          pics: [], // 默认空图片数组
          createdAt: '', // 默认空创建时间
          updatedAt: '' // 默认空更新时间
        }))
        
        if (page === 1) {
          spotsData.value = formattedSpots
        } else {
          spotsData.value.push(...formattedSpots)
        }
        
        hasMoreSpots.value = spotsData.value.length < spotsTotal.value
        spotsPage.value = page
      }
    }
    
  } catch (err) {

    console.error('加载钓点失败:', err)
    const event = new CustomEvent('show-notification', {
      detail: { 
        message: '加载钓点失败: ' + (err instanceof Error ? err.message : '未知错误'), 
        type: 'error' 
      }
    });
    window.dispatchEvent(event);
  } finally {
    spotsLoading.value = false
  }
}

// 加载更多钓点
const loadMoreSpots = () => {
  if (hasMoreSpots.value && !spotsLoading.value) {
    loadCircleSpots(spotsPage.value + 1)
  }
}

// 滚动加载更多
const handleScroll = (event: Event) => {
  const target = event.target as HTMLElement
  const scrollTop = target.scrollTop
  const scrollHeight = target.scrollHeight
  const clientHeight = target.clientHeight
  
  console.log('滚动事件触发:', {
    scrollTop,
    scrollHeight,
    clientHeight,
    distanceToBottom: scrollHeight - scrollTop - clientHeight,
    hasMore: hasMoreSpots.value,
    loading: spotsLoading.value
  })
  
  // 当滚动到底部时加载更多
  if (scrollTop + clientHeight >= scrollHeight - 100) {
    console.log('触发加载更多钓点')
    loadMoreSpots()
  }
}

// 保存选中的钓点
const saveSelectedSpots = async () => {
  if (!circle.value || selectedSpotIds.value.length === 0) {
    window.showToast?.('请至少选择一个钓点', 'info')
    return
  }
  
  try {
    matchLoading.value = true
    
    // 调用后端API保存选中的钓点
    const response = await invoke('save_circle_match', {
      id: circle.value.id.toString(),
      spotIds: selectedSpotIds.value
    })
    
    console.log('保存匹配钓点响应:', response)
    
    // 检查响应状态
    let apiResponse;
    if (typeof response === 'string') {
      try {
        apiResponse = JSON.parse(response);
      } catch (e) {
        apiResponse = { code: 200, msg: 'success' }; // 默认成功
      }
    } else {
      apiResponse = response;
    }
    
    if (apiResponse && (apiResponse.code === 200 || apiResponse.code === '200')) {
      // 关闭模态框并刷新数据
      showMatchModal.value = false
      
      // 重新加载钓点圈详情以更新关联的钓点
      await loadCircleDetail()
      
      const event = new CustomEvent('show-notification', {
        detail: { 
          message: `成功添加 ${selectedSpotIds.value.length} 个钓点到圈子`, 
          type: 'success' 
        }
      });
      window.dispatchEvent(event);
    } else {
      throw new Error(apiResponse?.msg || apiResponse?.message || '保存失败')
    }
    
  } catch (err) {
    console.error('保存匹配钓点失败:', err)
    const event = new CustomEvent('show-notification', {
          detail: { 
            message: '保存匹配钓点失败: ' + (err instanceof Error ? err.message : '未知错误'), 
            type: 'error' 
          }
        });
        window.dispatchEvent(event);
  } finally {
    matchLoading.value = false
  }
}

// 取消匹配
const cancelMatch = () => {
  showMatchModal.value = false
  selectedSpotIds.value = []
  matchingSpots.value = []
}

// 打开更新编辑器（路由跳转方式）
const openUpdateEditor = () => {
  if (!circle.value) return
  router.push({
    name: 'CircleEdit',
    params: { id: circle.value.id },
    query: { isUpdate: 'true' }
  })
}

// 删除钓点圈（已废弃，使用openDeleteModal替代）
const deleteCircle = async () => {
  openDeleteModal()
}

onMounted(() => {
  console.log('CircleDetail mounted, circleId:', circleId.value)
  console.log('Route params:', route.params)
  console.log('Props:', props)
  if (circleId.value) {
    loadCircleDetail()
  } else {
    console.error('No circleId found!')
    error.value = '无效的圈子ID'
  }
})

</script>

<style scoped>
.circle-detail-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  color: var(--text-primary);
  background: var(--bg-primary);
  overflow: hidden;
}

.header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--bg-header);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  z-index: 100;
  flex-shrink: 0;
}

.back-btn {
  background: var(--accent-primary-bg);
  color: var(--accent-primary);
  border: 1px solid var(--accent-primary);
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.back-btn:hover {
  background: var(--accent-primary-hover-bg);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  justify-content: center;
}

.header-actions .status-badge,
.header-actions .primary-btn,
.header-actions .secondary-btn {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  border-radius: 18px;
  transition: all 0.3s ease;
  white-space: nowrap;
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  cursor: pointer;
}

.header-actions .status-badge {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  padding: 0 16px;
  border: 1px solid var(--border);
  margin: 0;
  cursor: default;
}

.header-actions .status-badge:hover:not(:disabled) {
  cursor: pointer;
}

.header-actions .status-badge.active {
  background: var(--accent-primary-bg);
  color: var(--accent-primary);
  border-color: var(--accent-primary);
}

.header-actions .status-badge:disabled,
.header-actions .primary-btn:disabled,
.header-actions .secondary-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.header-actions .primary-btn {
  background: var(--accent-primary);
  color: var(--text-inverse);
  border: none;
  padding: 0 20px;
}

.header-actions .primary-btn:hover:not(:disabled) {
  background: var(--accent-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

.header-actions .secondary-btn {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  padding: 0 20px;
}

.header-actions .secondary-btn:hover:not(:disabled) {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.header-actions .delete-btn {
  background: transparent;
  color: var(--accent-danger);
  border: 1px solid var(--accent-danger);
  padding: 0 20px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  border-radius: 18px;
  transition: all 0.3s ease;
  white-space: nowrap;
  cursor: pointer;
}

.header-actions .delete-btn:hover:not(:disabled) {
  background: var(--accent-danger-bg);
  color: var(--accent-danger-hover);
  border-color: var(--accent-danger-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-danger);
}

.header-actions .delete-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 加载状态 */
.loading-container,
.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  color: var(--text-secondary);
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--accent-primary-bg);
  border-top: 3px solid var(--accent-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

.error-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.retry-btn {
  padding: 8px 16px;
  background: var(--accent-primary-bg);
  color: var(--accent-primary);
  border: 1px solid var(--accent-primary);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.retry-btn:hover {
  background: var(--accent-primary-hover-bg);
}

/* 可滚动内容区域 */
.scrollable-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.scrollable-content::-webkit-scrollbar {
  width: 8px;
}

.scrollable-content::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
  border-radius: 4px;
}

.scrollable-content::-webkit-scrollbar-thumb {
  background: var(--accent-primary-bg);
  border-radius: 4px;
}

.scrollable-content::-webkit-scrollbar-thumb:hover {
  background: var(--accent-primary);
}

/* 详情内容 */
.detail-content {
  width: 100%;
}

.image-section {
  margin-bottom: 32px;
}

.image-container {
  position: relative;
  width: 100%;
  height: 400px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
}

.main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.no-image {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.no-image-icon {
  font-size: 48px;
  margin-bottom: 8px;
}

/* 图片导航 */
.image-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0;
}

.thumb-btn {
  flex-shrink: 0;
  width: 80px;
  height: 60px;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

.thumb-btn.active {
  border-color: var(--accent-primary);
}

.thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 信息部分 */
.info-section {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 32px;
}

.info-header {
  margin-bottom: 24px;
}

.circle-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
}

.status-badge {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 600;
}

.status-badge.active {
  background: var(--accent-primary);
  color: var(--text-inverse);
}

.meta-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.info-item {
  display: flex;
  align-items: center;
}

.label {
  color: var(--text-secondary);
  font-size: 14px;
  margin-right: 8px;
}

.value {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
}

.description-section,
.points-section,
.spots-section {
  margin-bottom: 32px;
}

.description-section h3,
.points-section h3 {
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
}

.description {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.6;
}

.points-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.point-item {
  display: flex;
  align-items: center;
  background: var(--bg-tertiary);
  padding: 8px 12px;
  border-radius: 6px;
}

.point-index {
  background: var(--accent-primary);
  color: var(--text-inverse);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  margin-right: 8px;
}

.point-coords {
  color: var(--text-secondary);
  font-size: 12px;
}

/* 关联钓点表格样式 */
.spots-table {
  overflow-x: auto;
  border-radius: 8px;
  background: var(--bg-tertiary);
}

.spots-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.spots-table th,
.spots-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.spots-table th {
  background: var(--bg-card);
  color: var(--text-primary);
  font-weight: 600;
}

.spots-table td {
  color: var(--text-secondary);
}

.spots-table tr:hover {
  background: var(--bg-hover);
}

.type-badge,
.fee-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.type-badge.public {
  background: var(--accent-success-bg);
  color: var(--accent-success);
}

.type-badge.private {
  background: var(--accent-danger-bg);
  color: var(--accent-danger);
}

.fee-badge.free {
  background: var(--accent-success-bg);
  color: var(--accent-success);
}

.fee-badge.paid {
  background: var(--accent-warning-bg);
  color: var(--accent-warning);
}

.spots-section .no-spots {
    text-align: center;
    color: var(--text-secondary);
    font-size: 16px;
    padding: 32px;
    background: var(--bg-tertiary);
    border-radius: 8px;
}

.spot-type.private {
    background-color: var(--accent-danger);
    color: var(--text-inverse);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.spot-type.public {
    background-color: var(--accent-success);
    color: var(--text-inverse);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.fee-type.free {
    background-color: var(--accent-info);
    color: var(--text-inverse);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.fee-type.paid {
    background-color: var(--accent-warning);
    color: var(--text-inverse);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.loading-more {
  text-align: center;
  padding: 20px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.loading-more .loading-spinner-small {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top: 2px solid var(--accent-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.no-more {
  text-align: center;
  padding: 20px;
  color: var(--text-muted);
  font-size: 14px;
}

/* 动画 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 删除确认模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.modal-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
  max-width: 400px;
  width: 90%;
  box-shadow: var(--shadow-modal);
  animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-header h3 {
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 16px 0;
  text-align: center;
}

.modal-body {
  margin-bottom: 24px;
}

.modal-body p {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 12px 0;
  text-align: center;
}

.warning-text {
  color: var(--accent-danger) !important;
  font-size: 14px !important;
  font-weight: 500;
}

.modal-footer {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.btn-cancel,
.btn-confirm {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 100px;
}

.btn-cancel {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

.btn-cancel:hover {
  background: var(--bg-card);
}

.btn-confirm {
  background: var(--accent-danger);
  color: var(--text-inverse);
  border: 1px solid var(--accent-danger);
}

.btn-confirm:hover:not(:disabled) {
  background: var(--accent-danger-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-danger);
}

.btn-confirm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.loading-spinner-small {
  width: 12px;
  height: 12px;
  border: 2px solid var(--text-primary);
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.status-badge.loading {
  opacity: 0.7;
  cursor: not-allowed;
}



/* 匹配模态框样式 */
.match-modal {
  max-width: 800px;
  max-height: 80vh;
  overflow: hidden;
}

.match-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 16px;
  margin-bottom: 0;
}

.close-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.close-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.match-modal .modal-body {
  max-height: 60vh;
  overflow-y: auto;
  padding: 24px 0;
}

.selection-info {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 16px;
  text-align: center;
}

.spots-table-container {
  background: var(--bg-tertiary);
  border-radius: 8px;
  overflow: hidden;
}

.spots-table-container table {
  width: 100%;
  border-collapse: collapse;
}

.spots-table-container th,
.spots-table-container td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.spots-table-container th {
  background: var(--bg-card);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 14px;
}

.spots-table-container td {
  color: var(--text-secondary);
  font-size: 14px;
}

.spots-table-container tr:hover {
  background: var(--bg-hover);
}

.spots-table-container tr:last-child td {
  border-bottom: none;
}

/* 自定义复选框样式 */
.checkbox-container {
  display: inline-block;
  position: relative;
  cursor: pointer;
  user-select: none;
}

.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px;
  transition: all 0.3s ease;
}

.checkbox-container input:checked ~ .checkmark {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid var(--text-inverse);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

.no-data {
  text-align: center;
  padding: 48px;
  color: var(--text-secondary);
}

.no-data-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .circle-detail-container {
    padding: 16px;
  }
  
  .info-section {
    padding: 20px;
  }
  
  .circle-title {
    font-size: 24px;
  }
  
  .image-container {
    height: 250px;
  }
  
  .meta-info {
    grid-template-columns: 1fr;
  }
  
  .actions {
    flex-direction: column;
  }
  
  .primary-btn,
  .secondary-btn {
    width: 100%;
  }
}
</style>